{% extends "announcements/announcements.html" %}

{% block page_link %}
    <script src="../../static/announcements/js/amend.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../static/announcements/css/style.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <script src="../../static/public_file/js/wangEditor.min.js" type="text/javascript" charset="UTF-8"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .switch-btn {
            cursor: pointer;
            width: 50px;
            height: 25px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #CFCFCF;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 15px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }
        .switch-btn:before {
            content: '';
            width: 23px;
            height: 23px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        }
        .switch-btn:checked {
            border-color: #56b0d4;
            box-shadow: #56b0d4 0 0 0 16px inset;
            background-color: #56b0d4;
        }
        .switch-btn:checked:before {
            left: 26px;
        }
        .switch-btn.switch-btn-animbg {
            transition: background-color ease .4s;
        }
        .switch-btn.switch-btn-animbg:before {
            transition: left .3s;
        }
        .switch-btn.switch-btn-animbg:checked {
            box-shadow: #dfdfdf 0 0 0 0 inset;
            background-color: #56b0d4;
            transition: border-color .4s, background-color ease .4s;
        }
        .switch-btn.switch-btn-animbg:checked:before {
            transition: left .3s;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #78C3F3;
            color: #00688B;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
        input{
            padding: 8px 10px 8px 40px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="news_manage.html" style="color: #0b0b0b;">
                <i class="iconfont icon-xinwen1"></i>
                <span> 新闻管理</span> <span> > </span> <a href="add_news.html"> 新增新闻</a>
            </a>
        </div>

{#        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;margin-right: 2%;">#}
{#            <button onclick="Confirm_Preview()" data-toggle="modal" data-target=".bd-example-modal-sm" style="height: 30px;width: 90%" type="button" class="btn btn-info add-station1">预览</button>#}
{#        </div>#}

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button style="height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px" id="add_station" type="button" class="btn btn-default add-station" onclick="news_content()">保存</button>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 93%;padding: 0 30px 0 15px;overflow: auto;">
        <div style="margin-top: 3%;width: 100%;">
            <span style="color: red;">*</span>
            <label> 新闻标题：</label>
            <input id="news-name" class="form-control section-input" type="text" placeholder=" 新闻标题" style="width: 80%;" value="{{ name }}">
        </div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;">*</span>
            <label> 发布时间：</label>
            <input id="notice-date" class="form-control section-input" type="datetime-local" style="width: 80%;" value="{{ release_time }}">
        </div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;visibility: hidden;">*</span>
            <label style="vertical-align: top;"> 封面图片：</label>
            <a href="javascript:;" class="file" style="display: inline-block;vertical-align: top;">
                <i class="iconfont icon-upload"></i>
                上传附件封面图片
                <input type="file" name="myfile" id="myfile" onchange="Upload_img()">
            </a>


            <div id="cover-img" style="width: 33%;height: 300px;border: #cfcfcf solid 1px;margin-top: 1%;overflow: auto;display: {{ disply }};">
                <img style="width: 100%;height: 298px;" id="cover-size" src="{{ cover_picture }}" alt="">
            </div>
        </div>

        <div id="receive" style="width: 100%;margin-top: 2%;">
            <span style="color: red;">*</span>
            <label style="vertical-align: top;"> 新闻内容：</label>
            <div id="summernote" style="width: 80%;display: inline-block;vertical-align: top;">
                {% autoescape off %}
                    {{ content }}
                {% endautoescape %}
            </div>
        </div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;visibility: hidden;">*</span>
            <label style="vertical-align: top;"> 附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</label>
            <a href="javascript:;" class="file" style="display: inline-block;vertical-align: top;">
                上传附件
                <input type="file" name="accessory" id="accessory" onchange="upload_accessory()">
            </a>
            <button style="height: 30px;width: 8%;background: #D0EEFF;color: #1E88C7;border-radius: 4px;border: 1px solid #99D3F5;" id="add_station" type="button" class="btn btn-default add-station">删除附件</button>
        </div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;visibility: hidden;">*</span>
            <div style="border: #00d0ff solid 1px;display: inline-block;vertical-align: top;width: 86%;">
                <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;">
                    <thead>
                        <tr>
                            <th scope="col" style="width: 3%;">
                                <input type="checkbox" onclick="check_all_not()" id="check_all">
                            </th>
                            <th scope="col" style="width: 8%;">序号</th>
                            <th scope="col" style="width: 30%;">文件名称</th>
                            <th scope="col" style="width: 8%;">文件大小</th>
                            <th scope="col" style="width: 15%;">上传时间</th>
                            <th scope="col" style="width: 10%;">上传人员</th>
                            <th scope="col" style="width: 5%;">操作</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="t_table">
                        {% for foo in adjunct %}
                            <tr>
                                <td style="text-align: center;"><input type="checkbox"></td>
                                <td></td>
                                <td>{{ foo.file_name }}</td>
                            </tr>
                        {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>

        <div style="height: 50px;">

        </div>
    </div>
{% endblock %}




{% block script %}
    <script>
        const E = window.wangEditor;
        const editor = new E("#summernote");
        // 或者 const editor = new E(document.getElementById('div1'))
        editor.config.uploadImgShowBase64 = 'true';
        editor.placeholder = "qin";
        editor.create();
    </script>
{% endblock %}
